<template>
<div class="jjyClass">
    <div style="width: 100%;margin-left: 0;padding:5px;text-align: left">
            <el-button
                    style="font-size: 16px"
                    size="mini"
                    type="primary"
                    :plain="true"
                    @click="addData">添加信息</el-button>
        </div>
    <el-table header-row-class-name="headerClass" :data="elTableData" stripe style="width: 100%">
            <el-table-column prop="classId" label="学生班级ID" min-width="180">
            </el-table-column>
            <el-table-column prop="className" label="学生班级名称" min-width="180">
            </el-table-column>
            <el-table-column prop="address" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            plain
                            @click="updata(scope.row)">修改</el-button>

                    <el-button size="mini"
                               type="danger"
                               plain
                               @click="remove(scope.row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <!--        页码-->
        <el-pagination :current-page="elPage" @current-change=elchangePage :page-size=5 layout="prev, pager, next" :total="tableData.length"></el-pagination>


        <el-dialog :title="titleMap[dialogTitle]" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm">
                <el-form-item label="学生班级ID：" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.classId"  :disabled=true autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学生班级名称：" :label-width="formLabelWidth">
                    <!-- <el-input v-model="ruleForm.classId" autocomplete="off"></el-input> -->
                     <el-input v-model="ruleForm.className"  autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitData(ruleForm)">确 定</el-button>
                <el-button @click="close(ruleForm)">取 消</el-button>
            </div>
        </el-dialog>


</div>
</template>

<script>
    import * as api from '../utils/api'
    import axios from "axios";
    
    export default {
        name: "jjyClass",
         data() {
            return {
                tableData:[],
                elPage:1,
                xzPage:5,  //选择多少条


                ruleForm: {
                    classId:'',
                    className:''
                },
                dialogFormVisible: false,
                titleMap : { addData : "添加班级信息" , updateData : "修改班级信息" },
                dialogTitle : "",

                formLabelWidth: '120px',
            
                
            }
        },
        computed:{
            elTableData(){
                let kaishi=(this.elPage-1)*this.xzPage
                let jieshu=(this.elPage-1)*this.xzPage+this.xzPage
                return this.tableData.slice(kaishi,jieshu)
            }
        },
        created(){
            this.axios({
                url:api.GET_CLASSDATA,
                method:'get',
            }).then(data=>{
                console.log(data);
                this.tableData=data.data.data
            })
        },
        methods:{
            remove(data){
                this.$confirm('是否删除', '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })
                    .then(() => {
                        let id=data.classId
                        this.axios({
                            url:api.POST_DELCLASSDATA,
                            method: 'post',
                            data: {classId:id}
                        }).then(data=>{
                            if (data.data.state.code===200){
                                this.tableData=data.data.data
                                this.$message({
                                    type: 'success',
                                    message: data.data.state.meg
                                });
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: data.data.state.meg
                                });
                            }

                        }).catch(err=>{
                            console.log(err)
                        })

                    })
                    .catch(action => {
                        // this.$message({
                        //     type: 'info',
                        //     message: action === 'cancel'
                        //         ? '放弃保存并离开页面'
                        //         : '停留在当前页面'
                        // })
                    });
            },

            addData(){
                this.dialogFormVisible = true

                this.dialogTitle="addData"
                this.ruleForm={}
                console.log(this.dialogTitle)
            },
            updata(data){
                this.dialogFormVisible = true

                this.ruleForm={...data}

                this.dialogTitle="updateData"
                console.log(this.dialogTitle)
            },

            submitData(data){
                this.dialogFormVisible = false
                // console.log(data)

                // console.log(this.dialogTitle)
                if (this.dialogTitle == "addData") {
                    // console.log(this.ruleForm);
                    this.axios({
                        url:api.POST_ADDCLASSDATA,
                        method: 'post',
                        data: {data:this.ruleForm}
                    }).then(data=>{
                        // console.log(data)
                        if (data.data.state.code===200){
                            this.tableData=data.data.data
                            this.$message({
                                type: 'success',
                                message: data.data.state.msg
                            });
                        }else {
                            this.$message({
                                type: 'error',
                                message: data.data.state.msg
                            });
                        }
                    }).catch(err=>{
                        console.log(err)
                    })

                } else {
                    console.log(this.ruleForm)

                    this.axios({
                        url:api.POST_UPCLASSDATA,
                        method: 'post',
                        data: {data:this.ruleForm}
                    }).then(data=>{
                        console.log(data)
                        if (data.data.state.code===200){
                            this.tableData=data.data.data
                            this.$message({
                                type: 'success',
                                message: data.data.state.msg
                            });
                        }else {
                            this.$message({
                                type: 'error',
                                message: data.data.state.msg
                            });
                        }
                    }).catch(err=>{
                        console.log(err)
                    })
                }


            },
            close(data){
                this.dialogFormVisible = false

            },




            elchangePage(val){
                this.elPage=val
            },
            
        }
    }
    
</script>

<style scoped>
    .el-pagination{
        margin-top: 30px;
    }
</style>